/* eslint-disable @typescript-eslint/no-unused-vars */

import { useState, useEffect } from 'react'

import TodoAdd from './components/TodoAdd'
import TodoList from './components/TodoList'
import TodoFooter from './components/TodoFooter'
import myapp from './myapp'
import useApp from './myapp1'
// 导入todos样式
import './App.css'

/**
 * 功能一：展示任务列表
 *
 * 思路：根据任务列表数据，渲染任务列表
 * 流程：提供数据 -> 传递数据 -> 渲染数据
 *
 * 1. 提供初始化数据 initialState，因为数据需要子组件共享，这里就由父组件提供这个数据
 * 2. 为函数组件提供状态： useState(initialState)
 * 3. 将任务列表数据通过 props 传递给子组件 TodoList
 * 4. 在子组件 TodoList 中渲染任务列表
 */
const initialState = [{ id: 1, text: '吃饭', done: false }]

const App = () => {
  // 这里使用的是myapp.ts这个工具文件的函数，把操作文件抽取到一个单独的文件
  // 这样可以减少主文件的代码量，便于维护
  // 这里的 todos, setTodos 不能抽取到工具文件中，因为react hooks函数只能
  // 在react的函数组件中使用，不能在其他的地方使用，但是可以把它封装成为一个类似hook的文件
  // const [todos, setTodos] = useState(initialState)
  // const { onAdd, onDelete, onToggle } = myapp(todos, setTodos)


  // 这里就是把整个功能都放到单独文件的写法，跟这个有点类似的就是useReducer的方式，都是把复杂逻辑提取出来
  // 这里还保留了初始数据从主文件引入的方式，如果不需要
  // 初始数据也可以放到拆分的文件中
  // 唯一的缺陷是会导致useEffect钩子函数的依赖报错，但是不影响代码运行
  // 这个写法就是后面的自定义hooks，也可以把useEffect封装进自己的文件中
  const { todos, setTodos, onAdd, onDelete, onToggle, echoTodo } = useApp(initialState)

  // 添加任务
  // const onAdd = (text: string) => {
  //   const id = todos.length === 0 ? 1 : todos[todos.length - 1].id + 1
  //   setTodos([
  //     ...todos,
  //     {
  //       id,
  //       text,
  //       done: false
  //     }
  //   ])
  // }
  // 切换状态
  // const onToggle = (id: number) => {
  //   // 使用map的方式来快速生成新的数组
  //   // map的返回值是经过处理的新数组
  //   // 使用解构赋值的方式来修改对象的属性，后面的属性会覆盖之前的属性
  //   const newTodos = todos.map(todo => {
  //     if (todo.id === id) {
  //       return {
  //         ...todo,
  //         done: !todo.done
  //       }
  //     }
  //     return todo
  //   })
  //   setTodos(newTodos)
  // }
  // 删除任务
  // const onDelete = (id: number) => {
  //   const newTodos = todos.filter(item => {
  //     return item.id !== id
  //   })
  //   setTodos(newTodos)
  // }
  // 本地化  1.读取本地数据 2.数据改变时存储数据
  // 读取localhost中的数据
  useEffect(() => {
    const res = localStorage.getItem('todos')
    if (res) {
      const resTodos = JSON.parse(res)
      setTodos(resTodos)
    }
    // echoTodo()
  }, [])
  // 保存最新的数据到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(todos))
  }, [todos])
  return (
    <section className='todoapp'>
      {/* 添加任务 这里父组件向子组件传递了一个事件 */}
      <TodoAdd onAddTodo={onAdd} />
      <section className='main'>
        <input id='toggle-all' className='toggle-all' type='checkbox' />
        <label htmlFor='toggle-all'>Mark all as complete</label>
        {/* 列表组件  这里传递了事件和数据，分开传递的，需要子组件都做接收
        可以理解为这些都是子组件这个函数需要的参数，直接传递给他就好*/}
        <TodoList
          onDeleteTodo={onDelete}
          onToggleTodo={onToggle}
          list={todos}
        />
      </section>

      {/* footer 组件 */}
      <TodoFooter />
    </section>
  )
}

export default App
